<template>
  <div>
    <div id='showfrom' style='width:500px;height:500px;'></div>
    客户信息展示
    <ul>
      <li v-for='i in customerlist.data' :key='i.name'>{{i}}</li>
    </ul>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import myaxios from 'axios'
import {reactive} from 'vue'
export default {
name: "echarts",
  setup() {
    let customerlist = reactive({'data':[{'name':'234'}]})
    //初始化websocket
    const initWebsocket=()=>{
      let socket = new WebSocket('ws://127.0.0.1:8000/websocket_conn/')
      //建立
      socket.onopen=function(){
        console.log('建立连接')
      }
      //接收消息
      socket.onmessage=function(msg){
        customerlist.data=JSON.parse(msg.data)
        console.log(customerlist)
      }
      //关闭
      socket.close=function(e){
        console.log(e)
        console.log('close')
      }
    }
    return{
      customerlist,
      initWebsocket
    }
  },
  data(){
    return{
      fromlist:[],
      // customerlist:[{'name':'234'}]
    }
  },
  methods: {
    //实例化图形
    initfrom(){
      let showfrom = document.getElementById('showfrom')
      var myChart = echarts.init(showfrom);
      var option;

      option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.fromlist,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    getResourceFrom(){
      myaxios.get('http://localhost:8000/getmes').then(res=>{
        this.fromlist=res.data.list
        this.initfrom()
      })
    }
  },
  mounted() {
    this.getResourceFrom()
    this.initWebsocket()
  },
}
</script>

<style scoped>

</style>